import React,{useState} from 'react'
import { List, InputItem,Button } from 'antd-mobile';
import signIn,{ISignInData} from "../../../network/socket/signIn";
import {showToast} from "../../../components/MyToast/MyToast";
import {withRouter,RouteComponentProps} from "react-router-dom";

interface IEvent {
    value: string;
    [props: string]: any
}
const Login = (props: RouteComponentProps) => {
    const [uEmail,setEmail] = useState<string>('')
    const [emailHasError,setEmailHasError] = useState<boolean>(false)
    const [uPwd,setPwd] = useState<string>('')
    const [pwdHasError,setPwdHasError] = useState<boolean>(false)
    const inputEmail = (e: React.KeyboardEvent) => {
        setEmail((e.target as unknown as IEvent).value)
    }
    const inputPwd = (e: React.KeyboardEvent) => {
        setPwd((e.target as unknown as IEvent).value)
    }
    const emailBlur = () => {
        //邮箱输入框失去焦点触发验证
        const reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
        if(!reg.test(uEmail)){
            setEmailHasError(true)
        }else{
            setEmailHasError(false)
        }
    }
    const pwdBlur = () => {
        if(!uPwd){
            setPwdHasError(true)
        }else{
            setPwdHasError(false)
        }
    }
    const loginBtn = () => {
        //点击登录按钮触发
        //直接校验
        emailBlur()
        pwdBlur()
        if(!emailHasError && !pwdHasError){
            signIn({uEmail, uPwd})
                .then(res => {
                    const {uUid,uNickName,uEmail} = res as unknown as ISignInData
                    sessionStorage.setItem('uUid',uUid);
                    sessionStorage.setItem('uNickName',uNickName)
                    sessionStorage.setItem('uEmail',uEmail)
                    showToast({type: 'success',content: '登录成功'})
                    setTimeout(() => {
                        //两秒后跳转到聊天界面
                        props.history.push('/in/chat')
                    },2000)
                })
                .catch(err => {
                    showToast({type: 'fail',content: err})
                })
        }else{
            showToast({type: 'fail',content: '请输入正确的信息后再登录'})
        }
    }
    return (
        <div>
            <List renderHeader={() => '欢迎使用Quick_chat'}>
                <InputItem
                    error={emailHasError}
                    placeholder="请输入您的邮箱账号"
                    onErrorClick={() => showToast({type: 'info',content: '请输入正确的邮箱'})}
                    onKeyUp={inputEmail}
                    onBlur={emailBlur}
                >邮箱账号</InputItem>
                <InputItem
                    error={pwdHasError}
                    onErrorClick={() => showToast({type: 'info', content: '密码不能为空'})}
                    type='password'
                    placeholder="请输入您的密码"
                    onKeyUp={inputPwd}
                    onBlur={pwdBlur}
                >密码</InputItem>
            </List>
            <Button size="small" type='primary' onClick={loginBtn} style={{width: '75px',margin: '10px auto'}}>登录</Button>
        </div>
    )
}

export default withRouter(Login)